<script>
  import addtable from '@/mixins/addtable'
  import AjaxStore from '@/utils/store/proxyAjax'
  import store from './store.js'
  import request from '@/utils/request'

  export default {
    name: 'project',
    mixins: [addtable, store],
    data() {
      return {
        labelWidth: '100px',
        tableOptWidth: '120',
        selectedList: [],
        dialogType: '',
        idKey: 'projectId',
        delIdKey: 'projectId',
        delListIdKey: 'projectIds',
        showInputFlag: true,
        inputPlaceholder: '输入项目名称搜索',
        testData: [],

        addUrl: '/v1/sys/project/add',
        updateUrl: '/v1/sys/project/update',
        delUrl: '/v1/sys/project/delete',
        delListUrl: '/v1/sys/project/deleteList',
        url: '/v1/sys/project/findById',
        getUserListUrl: '/v1/sys/user/getProjectUserList',
        store: new AjaxStore({
          url: '/v1/sys/project/query'
        }),
        columns: [
          { prop: "projectName", label: "项目名称", sortable: true, width: "120", 'show-overflow-tooltip': true, 'header-align': 'center' },
          { prop: "remark", label: "项目说明", sortable: true, 'min-width': "140", 'show-overflow-tooltip': true, 'header-align': 'center' },
          { prop: "managerName", label: "管理员", sortable: true, width: "140", 'show-overflow-tooltip': true, 'header-align': 'center' },
          { prop: "dataStatus", label: "状态", sortable: true, width: "80", 'header-align': 'center', formatter: (row, column, cellValue) => cellValue ? '启用' : '停用' }
        ],
        searchFields: [
        ],
        searchModel: {
        },

        searchBtnList: this.searchBtns,
        toolPanelBtnList: this.toolPanelBtns,
        tableRowBtnList: this.tableRowBtns,
        formPanel: {
          add: {
            model: {
              "projectId": '',
              "projectNo": '',
              "projectName": '',
              "url": '',
              "managerId": '',
              // "managerId": [],
              "managerName": '',
              "iconPath": '',
              "backgroundPath": '',
              "dataStatus": 1,
              "version": '',
              "creator": '',
              "createdTime": '',
              "updator": '',
              "updatedTime": '',
              "remark": ''
            },
            fields: [
              { label: '项目编号', prop: 'projectNo', placeholder: '输入项目编号', anchor: 24, focus: true },
              { label: '项目名称', prop: 'projectName', placeholder: '输入项目名称', anchor: 24 },
              { label: '链接', prop: 'url', placeholder: '输入项目链接', anchor: 24 },
              { label: '项目管理员', prop: 'managerId', placeholder: '请选择项目管理员', xType: 'SelectConfig.USER',
                multiple: false, filterable: true, anchor: 24, isLocal: false, ref: 'addManager',
                getData: () => {
                  return request({
                    url: '/v1/sys/user/getProjectUserList',
                    method: 'get',
                    headers: {
                      "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: ''
                  }).then(({ data }) => {
                    return data.map(item => {
                      return {
                        // value: /\d+/.test(item.codeValue) ? parseInt(item.codeValue) : item.codeValue,
                        value: /^\d+$/.test(item.userId) ? parseInt(item.userId) : item.userId + '',
                        label: item.userName,
                        ...item
                      }
                    })
                  })
                },
                on: {
                  'visible-change': (val) => {
                    val && this.$refs.addForm.$refs.addManager.load()
                  }
                }
              },
              { label: '状态', prop: 'dataStatus', xType: 'switch', anchor: 24, "active-value": 1, "inactive-value": 0 },
              // { label: '状态', prop: 'dataStatus', xType: 'SelectCode.ENABLED', placeholder: '输入状态', anchor: 24 },
              { label: '项目说明', prop: 'remark', type: 'textarea', placeholder: '输入备注', anchor: 24 }
            ],
            rules: {
              "projectNo": [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
              "projectName": [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
              "managerId": [{ required: true, message: '请选择项目管理员', trigger: 'blur' }],
              "dataStatus": [{ required: true, message: '请输入状态', trigger: 'blur' }]
            },
            title: '新增项目管理',
            type: 'ADD',
            ref: 'addForm',
            submitBtnList: this.addBtns
          },
          edit: {
            model: {
              "projectId": '',
              "projectNo": '',
              "projectName": '',
              "url": '',
              "managerId": '',
              // "managerName": [],
              "managerName": '',
              "iconPath": '',
              "backgroundPath": '',
              "dataStatus": 0,
              "version": '',
              "creator": '',
              "createdTime": '',
              "updator": '',
              "updatedTime": '',
              "remark": ''
            },
            fields: [
              { label: '项目编号', prop: 'projectNo', placeholder: '输入项目编号', anchor: 24, focus: true },
              { label: '项目名称', prop: 'projectName', placeholder: '输入项目名称', anchor: 24 },
              { label: '项目链接', prop: 'url', placeholder: '输入项目链接', anchor: 24 },
              { label: '项目管理员', prop: 'managerId', placeholder: '请选择项目管理员', xType: 'SelectConfig.USER',
                multiple: false, filterable: true, anchor: 24, isLocal: false, ref: 'editManager',
                getData: () => {
                  return request({
                    url: '/v1/sys/user/getProjectUserList',
                    method: 'get',
                    headers: {
                      "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: ''
                  }).then(({ data }) => {
                    return data.map(item => {
                      return {
                        // value: /\d+/.test(item.codeValue) ? parseInt(item.codeValue) : item.codeValue,
                        value: /^\d+$/.test(item.userId) ? parseInt(item.userId) : item.userId + '',
                        label: item.userName,
                        ...item
                      }
                    })
                  })
                },
                on: {
                  'visible-change': (val) => {
                    val && this.$refs.editForm.$refs.editManager.load()
                  }
                }
              },
              { label: '状态', prop: 'dataStatus', xType: 'switch', anchor: 24, "active-value": 1, "inactive-value": 0 },
              // { label: '状态', prop: 'dataStatus', xType: 'SelectCode.ENABLED', placeholder: '输入状态', anchor: 24},
              { label: '项目说明', prop: 'remark', type: 'textarea', placeholder: '输入备注', anchor: 24 }
            ],
            rules: {
              "projectNo": [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
              "projectName": [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
              "managerId": [{ required: true, message: '请选择项目管理员', trigger: 'blur' }],
              "dataStatus": [{ required: true, message: '请输入状态', trigger: 'blur' }]
            },
            title: '编辑项目管理',
            type: 'EDIT',
            ref: 'editForm',
            submitBtnList: this.editBtns
          },
          look: {
            model: {
              "projectId": '',
              "projectNo": '',
              "projectName": '',
              "url": '',
              "managerId": '',
              "managerName": '',
              "iconPath": '',
              "backgroundPath": '',
              "dataStatus": 0,
              "version": '',
              "creator": '',
              "createdTime": '',
              "updator": '',
              "updatedTime": '',
              "remark": ''
            },
            fields: [
              { label: '项目编号', prop: 'projectNo', placeholder: '', anchor: 24, disabled: true },
              { label: '项目名称', prop: 'projectName', placeholder: '', anchor: 24, disabled: true },
              { label: '链接', prop: 'url', placeholder: '', anchor: 24, disabled: true },
              // { label: '管理员', prop: 'managerName', placeholder: '输入项目管理员名称', anchor: 24 },
              { label: '项目管理员', prop: 'managerId', xType: 'SelectConfig.USER', multiple: false, filterable: true, anchor: 24, disabled: true, isLocal: false,
                getData: () => {
                  return request({
                    url: '/v1/sys/user/getProjectUserList',
                    method: 'get',
                    headers: {
                      "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: ''
                  }).then(({ data }) => {
                    return data.map(item => {
                      return {
                        // value: /\d+/.test(item.codeValue) ? parseInt(item.codeValue) : item.codeValue,
                        value: /^\d+$/.test(item.userId) ? parseInt(item.userId) : item.userId + '',
                        label: item.userName,
                        ...item
                      }
                    })
                  })
                }
              },
              { label: '状态', prop: 'dataStatus', xType: 'switch', anchor: 24, "active-value": 1, "inactive-value": 0, disabled: true },
              { label: '项目说明', prop: 'remark', type: 'textarea', placeholder: '', anchor: 24, disabled: true }
            ],
            // { label: '状态', prop: 'dataStatus', xType: 'SelectCode.ENABLED', placeholder: '输入状态', anchor: 24},
            rules: {
            },
            title: '查看项目管理',
            type: 'LOOK',
            ref: 'lookForm',
            submitBtnList: this.lookBtns
          }
          // config: {
          //   model: {
          //     'projectTemplate': '',
          //     'projectConfigColor': '',
          //     'projectLogo': ''
          //   },
          //   field: [
          //     { label: '项目模版', prop: 'projectTemplate', placeholder: '', anchor: 24, disabled: false, focuse: true },
          //   { label: '项目配色', prop: 'projectConfigColor', placeholder: 'SelectColorPicker.COLOR', anchor: 24, disabled: false },
          //     // { label: '项目配色', prop: 'projectConfigColor', xType: 'SelectColorPicker.COLOR', anchor: 24, disabled: false },
          //     { label: 'LOGO', prop: 'projectLogo', anchor: 24, disabled: false }
          //   ],
          //   rules: {
          //     "projectTemplate": [{ required: true, message: '请选择项目模版', trigger: blur }],
          //     "projectConfigColor": [{ required: true, message: '请选择项目配色', trigger: blur }]
          //   },
          //   title: '项目配置',
          //   type: 'CONFIG',
          //   ref: 'configForm',
          //   submitBtnList: this.configBtns
          // }
        }
      }
    },
    methods: {
      handleInputClick(ev, val) {
        const params = {}
        params.q_projectName = val
        this.store._searchParams = params
        this.$refs.table.load(1, this.store.limit)
      },
      handleSubmitAndAdd() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.add(this.formPanel.add.model).then(({ success, message }) => {
              if (success) {
                this.$refs.table.load(1)
                this.$message({
                  type: 'success',
                  message: message
                })
                this.$refs.addForm && this.$refs.addForm.resetFields()
              } else {
                this.$message({
                  type: 'error',
                  message: message
                })
              }
            })
          }
        })
      },
      handleAddSubmit() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.add(this.formPanel.add.model).then(({ success, message }) => {
              if (success) {
                this.$refs.table.load(1)
                this.dialogType = ""
                this.$message({
                  type: 'success',
                  message: message
                })
              } else {
                this.$message({
                  type: 'error',
                  message: message
                })
              }
            })
          }
        })
      }
      // handleConfig(row) {
      //   this.dialogType = this.formPanel.config.type
      //   this.$nextTick(() => {
      //     this.$refs.configForm[0] && this.$refs.configForm[0].resetFields()
      //   })
      // },
      // handleConfigSubmit() {

      // }
    },
    beforeCreate() {
      // 根据页面路由找出有权限访问的 url 数组
      const urlArr = (this.$route.meta && this.$route.meta.children || []).map(item => item.url)

      // 根据权限 url 数组过滤出能够使用的 按钮数组
      this.searchBtns = [
        { label: '查询', methods: 'handleSearch', url: '/v1/sys/project/query', icon: 'el-icon-search', type: 'primary', disabled: false },
        { label: '重置', methods: 'handleSearchReset', url: '', icon: 'el-icon-refresh', type: 'warning', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

      this.toolPanelBtns = [
        { label: '新增', methods: 'handleAdd', url: '/v1/sys/project/add', icon: 'el-icon-circle-plus-outline', type: 'primary', disabled: false },
        { label: '删除', methods: 'handleDelGroup', url: '/v1/sys/project/deleteList', icon: 'el-icon-delete', type: 'danger', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)))

      this.tableRowBtns = [
        { label: '编辑', methods: 'handleEdit', url: '/v1/sys/project/update', icon: 'el-icon-edit-outline', type: 'primary', key: 'edit', align: 'top-start', disabled: false },
        { label: '删除', methods: 'handleDelete', url: '/v1/sys/project/delete', icon: 'el-icon-delete', type: 'danger', key: 'delete', align: 'top-start', disabled: false }
        // { label: '配置', methods: 'handleConfig', icon: 'el-icon-setting', type: '', key: 'config', align: 'top-start', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.addBtns = [
        { label: '保存并新增', methods: 'handleSubmitAndAdd', url: '/v1/sys/project/add', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '保存', methods: 'handleAddSubmit', url: '/v1/sys/project/add', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.editBtns = [
        { label: '保存', methods: 'handleEditSubmit', url: '/v1/sys/project/update', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.lookBtns = [
        { label: '保存', methods: '', url: '', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: true },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.configBtns = [
        { label: '保存', methods: 'handleConfigSubmit', url: '', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)
    }
  }
</script>

<style lang="scss">
.project {
  .searchPanel {
    display: none;
  }
  .toolPanel {
    .search-input {
      float: right;
      width: 80%;
    }
  }
}
</style>

